---
title: "Chip"
description: "A Chip is a small block of essential information that represent an input, attribute, or action."
---

import {chipContent} from "@/content/components/chip";

# Chip

A Chip is a small block of essential information that represent an input, attribute, or action.

<ComponentLinks component="chip" />

---

<CarbonAd/>

## Installation

<PackageManagers
  showGlobalInstallWarning
  commands={{
    cli: "npx heroui-cli@latest add chip",
    npm: "npm install @heroui/chip",
    yarn: "yarn add @heroui/chip",
    pnpm: "pnpm add @heroui/chip",
    bun: "bun add @heroui/chip"
  }}
/>

## Import

<ImportTabs
  commands={{
    main: 'import {Chip} from "@heroui/react";',
    individual: 'import {Chip} from "@heroui/chip";',
  }}
/>

## Usage

<CodeDemo title="Usage" files={chipContent.usage} />

### Disabled

<CodeDemo title="Disabled" files={chipContent.disabled} />

### Sizes

<CodeDemo title="Sizes" files={chipContent.sizes} />

### Colors

<CodeDemo title="Colors" files={chipContent.colors} />

### Radius

<CodeDemo title="Radius" files={chipContent.radius} />

### Variants

<CodeDemo title="Variants" files={chipContent.variants} />

### Start & End Content

<CodeDemo title="Start & End Content" files={chipContent.startEndContent} />

### With Close Button

If you pass the `onClose` prop, the close button will be visible. You can override the close icon by passing the `endContent` prop.

<CodeDemo title="With Close Button" files={chipContent.closeButton} />

### With Avatar

<CodeDemo title="With Avatar" files={chipContent.avatar} />

### List of Chips

<CodeDemo title="List of Chips" files={chipContent.list} />

## Slots

- **base**: The base slot of the chip, it is the container of the chip.
- **content**: The content slot of the chip, it is the container of the chip children.
- **dot**: Small dot on the left side of the chip. It is visible when the `variant=dot` prop is passed.
- **avatar**: Avatar classes of the chip. It is visible when the `avatar` prop is passed.
- **closeButton**: Close button classes of the chip. It is visible when the `onClose` prop is passed.

### Custom Styles

You can customize the `Chip` component by passing custom Tailwind CSS classes to the component slots.

<CodeDemo title="Custom Styles" files={chipContent.customStyles} />

<Spacer y={4} />

## API

### Chip Props

<APITable
  data={[
    {
      attribute: "children",
      type: "ReactNode",
      description: "The content of the chip.",
      default: "-"
    },
    {
      attribute: "variant",
      type: "solid | bordered | light | flat | faded | shadow | dot",
      description: "The chip appearance style.",
      default: "solid"
    },
    {
      attribute: "color",
      type: "default | primary | secondary | success | warning | danger",
      description: "The color of the chip.",
      default: "default"
    },
    {
      attribute: "size",
      type: "sm | md | lg",
      description: "The size of the chip.",
      default: "md"
    },
    {
      attribute: "radius",
      type: "none | sm | md | lg | full",
      description: "The radius of the chip.",
      default: "full"
    },
    {
      attribute: "avatar",
      type: "ReactNode",
      description: "Avatar to be rendered in the left side of the chip.",
      default: "-"
    },
    {
      attribute: "startContent",
      type: "ReactNode",
      description: "Element to be rendered in the left side of the chip. This prop overrides the avatar prop.",
      default: "-"
    },
    {
      attribute: "endContent",
      type: "ReactNode",
      description: "Element to be rendered in the right side of the chip. This prop overrides the default close button when onClose is passed.",
      default: "-"
    },
    {
      attribute: "isDisabled",
      type: "boolean",
      description: "Whether the chip is disabled.",
      default: "false"
    },
    {
      attribute: "classNames",
      type: 'Partial<Record<"base" | "content" | "dot" | "avatar" | "closeButton", string>>',
      description: "Allows to set custom class names for the chip slots.",
      default: "-"
    }
  ]}
/>

### Chip Events

<APITable
  data={[
    {
      attribute: "onClose",
      type: "(e: PressEvent) => void",
      description: "Handler that is called when the close button is pressed. If you pass this prop, the chip will display a close button (endContent).",
      default: "-"
    }
  ]}
/>
